<template>
	<div class="filter">
		<div class="filter_top">
			<!-- 搜索 -->
			<div class="item_search">
				<div class="left-box">
					<el-input class="input-with-select el-input-group" v-model="input" placeholder="请输入关键词">
						<template slot="append">
							<el-button type="primary">搜索关键词</el-button>
						</template>
					</el-input>
				</div>
			</div>
			<!-- 搜索结束 -->
			<!-- 时间选择 -->
			<div class="filter_list">
				<div class="df mr20 aa-bb-cc-dd">
					<div class="list-item-txt mt0 df" style="align-items: center;">
						<el-radio-group v-model="radio1" class="tab-btn mr15" fill="#5830a0" @change="getVideoFun">
							<el-radio-button label="0">7天</el-radio-button>
							<el-radio-button label="1">15天</el-radio-button>
							<el-radio-button label="2">30天</el-radio-button>
							<el-radio-button label="3">90天</el-radio-button>
						</el-radio-group>
						<el-date-picker v-model="value1" type="datetimerange" range-separator="至"
							start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</div>
				</div>
			</div>
		</div>
		<div class="mt20 pt5 pl30 pr30 table-main">
			<div class="chart-wrap mt10">
				<div class="w100">
					<div class="titer-box">
						<span>统计概要</span>
					</div>
					<div class="view-data m0 mb15" v-if="echartmap.VideoStat">
						<ul>
							<li class="category-overview-li">
								<p>相关up主</p>
								<div>
									<strong>
										{{echartmap.VideoStat.BloggerCount}}
									</strong>
								</div>
							</li>
							<li class="category-overview-li">
								<p>相关视频数</p>
								<div>
									<strong>
										{{parseInt(echartmap.VideoStat.Count/100)/100}}w
									</strong>
								</div>
							</li>

							<li class="category-overview-li">
								<p>相关播放数</p>
								<div>
									<strong>
										{{parseInt(echartmap.VideoStat.ViewCount/1000000)/100}}亿
									</strong>
								</div>
							</li>
							<li class="category-overview-li">
								<p>相关互动量</p>
								<div>
									<strong>
										{{parseInt(echartmap.VideoStat.ActiveCount/100)/100}}w
									</strong>
								</div>
							</li>
							<li class="category-overview-li">
								<p>相关点赞数</p>
								<div>
									<strong>
										{{parseInt(echartmap.VideoStat.LikeCount/100)/100}}w
									</strong>
								</div>
							</li>
							<li class="category-overview-li">
								<p>相关收藏数</p>
								<div>
									<strong>
										{{parseInt(echartmap.VideoStat.FavoriteCount/100)/100}}w
									</strong>
								</div>
							</li>
							<li class="category-overview-li">
								<p>相关投币数</p>
								<div>
									<strong>
										{{parseInt(echartmap.VideoStat.CoinCount/100)/100}}w
									</strong>
								</div>
							</li>
							<li class="category-overview-li">
								<p>相关评论数</p>
								<div>
									<strong>
										{{parseInt(echartmap.VideoStat.ReplyCount/100)/100}}w
									</strong>
								</div>
							</li>
							<li class="category-overview-li">
								<p>相关弹幕数</p>
								<div>
									<strong>
										{{parseInt(echartmap.VideoStat.DanmuCount/100)/100}}w
									</strong>
								</div>
							</li>
							<li class="category-overview-li">
								<p>相关分享数</p>
								<div>
									<strong>
										{{parseInt(echartmap.VideoStat.ShareCount/100)/100}}w
									</strong>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="w100">
					<div class="title_box">
						<span>关键词热度趋势</span>
					</div>
					<div>
						<div class="day-list" style="justify-content: space-between;">
							<div class="flex">
								<div class="col1" style="min-width: 170px;">
									<el-radio-group v-model="radio2" class="tab-btn mr15" fill="#5830a0"
										@change="getVideoFun">
										<el-radio-button label="0">互动总量</el-radio-button>
										<el-radio-button label="1">平均互动值</el-radio-button>
									</el-radio-group>
								</div>
								<div class="pl20 pr10">

								</div>
								<div class="col1" style="min-width: 170px;">
									<el-radio-group v-model="radio3" class="tab-btn mr15" fill="#5830a0"
										@change="cutFun">
										<el-radio-button label="0">按日</el-radio-button>
										<el-radio-button label="1">按周</el-radio-button>
										<el-radio-button label="2">按月</el-radio-button>
									</el-radio-group>
								</div>
							</div>
							<div class="titer-right flex">
								<span class="tab-active" style="cursor: pointer;">相关视频</span>
								<span style="color: rgb(227, 227, 227); margin: 0px 4px;">|</span>
								<span style="cursor: pointer;">播放</span>
								<span style="color: rgb(227, 227, 227); margin: 0px 4px;">|</span>
								<span style="cursor: pointer;">点赞</span>
								<span style="color: rgb(227, 227, 227); margin: 0px 4px;">|</span>
								<span style="cursor: pointer;">收藏</span>
								<span style="color: rgb(227, 227, 227); margin: 0px 4px;">|</span>
								<span style="cursor: pointer;">投币</span>
								<span style="color: rgb(227, 227, 227); margin: 0px 4px;">|</span>
								<span style="cursor: pointer;">评论</span>
								<span style="color: rgb(227, 227, 227); margin: 0px 4px;">|</span>
								<span style="cursor: pointer;">弹幕</span>
								<span style="color: rgb(227, 227, 227); margin: 0px 4px;">|</span>
								<span style="cursor: pointer;">分享</span>
							</div>

						</div>
					</div>
					<div id="echart1" class="chart-box day-list-right">

					</div>
				</div>
				<div class="w50">
					<div class="titer-box">
						<span>视频分类发布</span>
					</div>
					<div class="flex">
						<div id="echart2" class="chart-box m-l-0">
						</div>
					</div>
				</div>
				<div class="w50">
					<div class="titer-box">
						<span>视频播放量级分布</span>
					</div>
					<div class="flex">
						<div id="echart3" class="chart-box">
						</div>
					</div>
				</div>
				<div class="w100">
					<div class="titer-box">
						<span>热门笔记列表</span>
					</div>
					<div>
						<el-table :data="videos.ItemList" style="width: 100%">
							<el-table-column label="视频信息" width="1071">
								<template slot-scope="scope">
									<div class="cell">
										<div class="userinfo videoinfo flex-col video_0">
											<div class="flex">
												<div class="left-box">
													<div class="left-img">
														<div class="curp">
															<img :src="'/bfs'+scope.row.LogoUrl.substr(23)" alt="">
														</div>
														<div class="video-time">
															{{scope.row.Duration|fix}}
														</div>
													</div>
												</div>
												<div class="right-txt">
													<div class="flex-box ">
														<data class="curp">
															<h3 :title="scope.row.Title" class="title">
																{{scope.row.Title}}
															</h3>
														</data>
														<span class="up-tag tag-plain">{{scope.row.CopyRight}}</span>
														<span class="up-tag tag-red">活动</span>
													</div>
													<div class="flex-box f12">
														<data>
															<span class="author text-blue-hover curp">
																{{scope.row.Author}}
															</span>
														</data>
														<div class="tx-color-gray-8 ml5">
															发布于 {{scope.row.PubTime}}
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="mt10 flex videoinfo">
											<span class="up-tag tag-plain tag-ov">{{scope.row.VideoTags[0]}}</span>
											<span class="up-tag tag-plain tag-ov">{{scope.row.VideoTags[1]}}</span>
											<span class="up-tag tag-plain tag-ov">{{scope.row.VideoTags[2]}}</span>
											<span class="up-tag tag-plain tag-ov">{{scope.row.VideoTags[3]}}</span>
											<span class="up-tag tag-plain tag-ov">{{scope.row.VideoTags[4]}}</span>
											<span class="up-tag tag-plain tag-ov">...</span>
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="分类" width="134">
								<template slot-scope="scope">
									<div>
										{{scope.row.Category}}
									</div>
								</template>
							</el-table-column>
							<el-table-column label="互动量" width="134">
								<template slot-scope="scope">
									<div>
										{{parseInt(scope.row.Active/100)/100+'w'}}
									</div>
								</template>
							</el-table-column>
							<el-table-column label="弹幕量" width="134">
								<template slot-scope="scope">
									<div>
										{{parseInt(scope.row.DanmuCount/100)+'w'}}
									</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<el-pagination :background="true" layout="prev, pager, next" :total="20000" class="paging mt15">
					</el-pagination>
				</div>
				<div class="w100">
					<div class="titer-box">
						<span>相关UP主趋势</span>
						<div class="titer-right">
							<span @click="num=0,cutFun" :class="num==0?'tab-active':''"
								style="cursor: pointer;">按日</span>
							<span style="color: rgb(227, 227, 227); margin: 0px 4px;"> | </span>
							<span @click="num=1,cutFun" :class="num==1?'tab-active':''"
								style="cursor: pointer;">按周</span>
							<span style="color: rgb(227, 227, 227); margin: 0px 4px;"> | </span>
							<span @click="num=2,cutFun" :class="num==2?'tab-active':''"
								style="cursor: pointer;">按月</span>
						</div>
					</div>
					<div class="blogger-count-day-list flex">
						<div id="echart4">

						</div>
					</div>
				</div>
				<div class="w50">
					<div class="titer-box">
						<span>相关UP主属性分布</span>
					</div>
					<div class="flex">
						<div id="echart5">

						</div>
					</div>
				</div>
				<div class="w50">
					<div class="titer-box">
						<span>视频播放量级分布</span>
					</div>
					<div class="flex">
						<div id="echart6">

						</div>
					</div>
				</div>
			</div>
			<div class="chart-wrap mt20">
				<div class="card__CategoryList mt20">
					<div class="card-wrap table-wrap">
						<div class="titer-box mb30">
							<span>关联UP主Top10</span>
						</div>
						<div>
							<el-table :data="bloggers.BrandList" style="width: 100%">
								<el-table-column label="UP主信息" width="764">
									<template slot-scope="scope">
										<div class="userinfo">
											<div class="left-box" style="flex-direction: unset;">
												<div class="flex flex-col">
													<div class="left-img curp">
														<img :src="'/bfs'+scope.row.AvatarUrl.substr(23)" alt="">
													</div>
												</div>
											</div>
										</div>
									</template>
								</el-table-column>
								<el-table-column  label="粉丝数" width="246">
								</el-table-column>
								<el-table-column  label="关联视频数" width="246">
								</el-table-column>
								<el-table-column  label="关联视频播放量" width="246">
								</el-table-column>
								<el-table-column  label="互动量" width="246">
								</el-table-column>
							</el-table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		GetVideo,
		GetEchart,
		GetBrand,
		GetBlogger
	} from '@/api/antistop.js'
	export default {
		data() {
			return {
				videos: {},
				echartmap: {},
				brands: {},
				bloggers: {},
				input: '',
				radio1: '0',
				radio2: '0',
				radio3: '0',
				value1: [new Date(2022, 6, 30), new Date(2022, 7, 5)],
				// 关键词热门笔记折线图数据
				list: [],
				date: [],
				myChart: null,
				Countlist: '',
				Countlists: '',
				Countlisting: '',
				// 视频分类分布柱状图数据
				lists: [],
				tname: [],
				// 视频播放量级分布数据
				listing: [],
				bname: [],
				num: 0,
				// 相关UP主趋势
				aname: [],
				dates: []
			}
		},
		mounted() {
			setTimeout(() => {
				this.getmychart();
			}, 600);
		},
		filters: {
			fix(val) {
				let arr = (val / 60).toFixed(2);
				let right = arr.split(".")[1];
				let rights = (right / 60).toFixed(2).split(".")[1]
				let time = arr.split(".")[0] + ":" + rights;
				return time;
			}
		},
		created() {
			this.getVideo();
			GetEchart({
					KeyWord: '搞笑',
					FilterWord: '',
					OptionalWord: '',
					TabKey: 'd7',
					BeginCode: 20220803,
					EndCode: 20220809,
					r: '0.8288441021993309'
				})
				.then(res => {
					if (res.data.Code === 200) {
						this.echartmap = res.data.Data
						// 关键词热度趋势折线图数据/相关UP主趋势
						this.Countlist = this.echartmap.VideoDateStat[1]
						this.Countlists = this.echartmap.VideoDateStat[7] //七天
						this.Countlisting = this.echartmap.VideoDateStat[30] //30天
						this.list = this.Countlist.map(item => item.Count)
						this.date = this.Countlist.map(items => items.DescName.slice(5))
						// 视频分类分布柱状图
						this.ChildList = this.echartmap.VideoCategory
						this.tname = this.ChildList.map(item => item.TName)
						this.lists = this.ChildList.map(item => item.Count)
						// 视频播放量级分布
						this.ActiveCount = this.echartmap.VideoViewCountStat
						this.bname = this.ActiveCount.map(item => item.Name)
						this.listing = this.ActiveCount.map(item => item.Count)
						// 相关UP主趋势
						this.aname = this.Countlist.map(item => item.BloggerCount)
						this.dates = this.Countlist.map(items => items.DescName.slice(5))
						// 相关UP主属性分布
						this.CountName = this.echartmap.PropStat
						this.sname = this.CountName.map(item => item.Name)
						this.listes = this.CountName.map(item => item.Count)
						// 视频播放量级分布
						this.CountStat = this.echartmap.VideoViewCountStat
						this.zname = this.CountStat.map(item => item.Name)
						this.num = this.CountStat.map(item => item.Count)
					}
				})


			GetBrand({
					KeyWord: ' 搞笑',
					FilterWord: '',
					OptionalWord: '',
					TabKey: 'd7',
					BeginCode: 20220730,
					EndCode: 20220805,
					SortType: 2,
					r: 0.447590808780987,
				})
				.then(res => {
					if (res.data.Code === 200) {
						this.brands = res.data.Data
						console.log('brands', this.brands)
					}
				})

			GetBlogger({
					KeyWord: '搞笑',
					FilterWord: '',
					OptionalWord: '',
					TabKey: 'd7',
					BeginCode: 20220802,
					EndCode: 20220808,
					SortType: 2,
					r: '0.12921736050244093'
				})
				.then(res => {
					if (res.data.Code === 200) {
						this.bloggers = res.data.Data
						console.log('bloggers', this.bloggers)
					}
				})

		},
		methods: {
			getVideo(TabKey = 'd7', BeginCode = 20220802, EndCode = 20220808) {
				// 关键词热门笔记数据
				GetVideo({
						KeyWord: '搞笑',
						FilterWord: '',
						OptionalWord: '',
						TabKey: TabKey,
						BeginCode: BeginCode,
						EndCode: EndCode,
						SortType: 2,
						pageIndex: 1,
						pageSize: 5,
						r: '0.9400966660990737'
					})
					.then(res => {
						if (res.data.Code === 200) {
							this.videos = res.data.Data
							console.log("videos", this.videos)
						}
					})
			},
			getVideoFun(e) {
				// console.log(e);
				if (e == 0) {
					this.getVideo('d7', 20220802, 20220808);
					this.value1 = [new Date(2022, 7, 30), new Date(2022, 7, 5)]
				} else if (e == 1) {
					this.getVideo('d15', 20220722, 20220808);
					this.value1 = [new Date(2022, 6, 25), new Date(2022, 7, 5)]
				} else if (e == 2) {
					this.getVideo('d30', 20220707, 20220808);
					this.value1 = [new Date(2022, 6, 10), new Date(2022, 7, 5)]
				} else if (e == 3) {
					this.getVideo('d90', 20220508, 20220808);
					this.value1 = [new Date(2022, 4, 11), new Date(2022, 7, 5)]
				}
			},
			// echarts图表
			getmychart() {
				// let myChart = this.$echarts.init(document.getElementById("main"));
				// 关键词热度趋势折线图1
				this.myChart = this.$echarts.init(document.getElementById('echart1'))
				this.myChart.setOption({
					tooltip: {},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: this.date
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: this.list,
						type: 'line',

					}],
				})
				// 视频分类分布柱状图1
				this.myCharttwo = this.$echarts.init(document.getElementById('echart2'))
				this.myCharttwo.setOption({
					tooltip: {},
					xAxis: {
						type: 'category',
						data: this.tname
					},
					yAxis: {
						type: 'value',

					},
					series: [{
						data: this.lists,
						type: 'bar',
						itemStyle: {
							color: "#fe649c",
							borderRadius: [30, 30, 0, 0]
						},
					}],

				})
				// 视频播放量级分布柱状图2
				this.myChartThree = this.$echarts.init(document.getElementById('echart3'))
				this.myChartThree.setOption({
					tooltip: {},
					xAxis: {
						type: 'category',
						data: this.bname
					},
					yAxis: {
						type: 'value',

					},
					series: [{
						data: this.listing,
						type: 'bar',
						itemStyle: {
							color: "#846eff",
							borderRadius: [30, 30, 0, 0]
						},
					}],

				})
				// 相关UP主趋势折线图2
				this.myChartFour = this.$echarts.init(document.getElementById('echart4'))
				this.myChartFour.setOption({
					tooltip: {},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: this.dates
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: this.aname,
						type: 'line',

					}],
				})
				// 相关UP主属性分布柱状图4
				this.myChartFive = this.$echarts.init(document.getElementById('echart5'))
				this.myChartFive.setOption({
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					tooltip: {},
					xAxis: {
						type: 'category',
						data: this.sname
					},
					yAxis: {
						type: 'value',

					},
					series: [{
						data: this.listes,
						type: 'bar',
						itemStyle: {
							color: "#7c67ff",
							borderRadius: [30, 30, 0, 0]
						},
					}],

				})
				// 视频播放量级分布柱状图
				this.myChartsix = this.$echarts.init(document.getElementById('echart6'))
				this.myChartsix.setOption({
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					tooltip: {},
					xAxis: {
						type: 'category',
						data: this.zname
					},
					yAxis: {
						type: 'value',

					},
					series: [{
						data: this.num,
						type: 'bar',
						itemStyle: {
							color: "#8871ff",
							borderRadius: [30, 30, 0, 0]
						},
					}],

				})

			},
			cutFun(e) {
				if (e == 0) {
					this.list = this.Countlist.map(item => item.Count)
					this.date = this.Countlist.map(items => items.DescName.slice(5))
					this.aname = this.Countlist.map(item => item.BloggerCount)
					this.dates = this.Countlist.map(items => items.DescName.slice(5))
					this.getmychart();
				} else if (e == 1) {
					this.list = this.Countlists.map(item => item.Count)
					this.date = this.Countlists.map(items => items.DescName.slice(5))
					this.aname = this.Countlists.map(item => item.BloggerCount)
					this.dates = this.Countlists.map(items => items.DescName.slice(5))
					this.getmychart();
				} else if (e == 2) {
					this.list = this.Countlisting.map(item => item.Count)
					this.date = this.Countlisting.map(items => items.DescName.slice(5))
					this.aname = this.Countlisting.map(item => item.BloggerCount)
					this.dates = this.Countlisting.map(items => items.DescName.slice(5))
					this.getmychart();
				}
			}
		},
	}
</script>
<style>
	.el-input__inner:focus {
		outline: 0;
		border-color: #5830a0;
	}

	.item_search .left-box .el-input-group__append {
		border: 0;
		background: #5830a0;
		border-radius: 0 4px 4px 0;
		color: #fff;
		font-size: 16px;
	}

	.el-radio-button__inner:hover {
		color: #5830a0;
	}

	.el-radio-button {
		height: 30px;
	}

	.el-radio-button__inner {
		height: 30px;
		line-height: 0.5;
	}

	.table-wrap .el-table table tbody tr td .cell {
		line-height: 25px;
	}

	.table-wrap .el-table .cell {
		overflow: inherit;
	}

	.el-table .cell {
		box-sizing: border-box;
		text-overflow: ellipsis;
		white-space: normal;
		word-break: break-all;
		padding-left: 10px;
		padding-right: 10px;

	}

	.cell:nth-of-type(1) {
		text-align: left;
	}
</style>
<!-- 除element ui样式 -->
<style lang="scss" scoped>
	.filter {
		margin-top: 20px !important;
	}

	.filter .filter_top {
		box-shadow: 0 0 8px rgb(0, 25, 141, 12%);
		border-radius: 2px;
		background-color: #fff;
		padding: 18px;
		font-size: 13px;
	}

	.item_search {
		display: flex;
		align-items: center;
	}

	.item_search .left-box {
		width: 480px;
		border-radius: 4px;
		height: 38px;
		box-sizing: border-box;
	}

	.input-with-select {
		position: relative;
		z-index: 20;
	}

	.el-input-group {
		line-height: normal;
		display: inline-table;
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
	}

	.item_search .left-box input {
		height: 36px;
		overflow: hidden;
		font-size: 16px;
	}

	.filter_list {
		margin-top: 10px !important;
	}

	.df {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}

	.mr20 {
		margin-right: 20px !important;
	}

	.df>* {
		flex-shrink: 0;
	}

	.mt0 {
		margin-top: 0 !important;
	}

	.filter_list .list-item-txt {
		display: flex;
		align-items: baseline;
		margin-top: 16px;
		min-height: 20px;
		font-size: 13px;
	}

	.mr15 {
		margin-right: 15px !important;
	}

	.tab-btn {
		height: 30px;
	}

	.mt20 {
		margin-top: 20px !important;
	}

	.pt5 {
		padding-top: 5px !important;
	}

	.pl30 {
		padding-left: 30px !important;
	}

	.pr30 {
		padding-right: 30px !important;
	}

	.table-main {
		box-shadow: 0 0 8px rgb(0, 25, 141, 12%);
		background-color: #fff;
	}

	.chart-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.mt10 {
		margin-top: 10px !important;
	}

	.w100 {
		width: 100% !important;
	}

	.w50 {
		width: 50% !important;
	}

	.titer-box {
		position: relative;
		height: 16px;
		line-height: 16px;
		padding-left: 14px;
		font-size: 16px;
		font-weight: 500;
		margin: 10px 0;
		display: flex;
		justify-content: space-between;
	}

	.titer-box::before {
		content: "";
		position: absolute;
		width: 4px;
		border-radius: 1px;
		background: #5830a0;
		height: 100%;
		top: 0;
		left: 0;
	}

	.view-data {
		border-radius: 4px;
		font-size: 14px;
	}

	.mb15 {
		margin-bottom: 15px !important;
	}

	.m0 {
		margin: 0;
	}

	.view-data ul {
		list-style: none;
		display: flex;
		justify-content: space-around;
	}

	.view-data ul li {
		border: 1px solid #ececec;
		border-radius: 4px;
		flex: 1;
	}

	.view-data ul li.category-overview-li {
		padding: 10px;
	}

	.view-data ul li+li.category-overview-li {
		margin-left: 12px;
	}

	.view-data ul li p {
		color: #2e384d;
		margin-bottom: 10px;
	}

	.view-data ul li div {
		display: flex;
		align-items: center;
	}

	.view-data ul li strong {
		font-size: 16px;
	}

	.title_box {
		position: relative;
		height: 16px;
		line-height: 16px;
		padding-left: 14px;
		font-size: 16px;
		font-weight: 500;
		margin: 10px 0;
		display: flex;
		justify-content: space-between;
	}

	.title_box::before {
		content: '';
		position: absolute;
		width: 4px;
		border-radius: 1px;
		background: #5830a0;
		height: 100%;
		top: 0;
		left: 0;
	}

	.day-list {
		display: flex;
	}

	.flex {
		display: flex !important;
	}

	.pl20 {
		padding-left: 20px !important;
	}

	.pr10 {
		padding-right: 10px !important;
	}

	.tab-active {
		color: #7030a0 !important;
	}

	#echart1 {
		width: 1640px;
		height: 296px;
	}

	#echart2 {
		width: 1000px;
		height: 296px;
	}

	.chart-box {
		min-height: 296px;
		width: 820px;
	}

	.chart-box {
		height: 100%;
	}

	.user_info {
		display: flex;
	}

	.left-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.videoinfo .left-img {
		width: 162px;
		height: 104px;
		background-color: #eee;
		border-radius: 2px;
		position: relative;
	}

	.curp {
		cursor: pointer !important;
	}

	.videoinfo .left-img img {
		width: 100%;
		height: 100%;
		border-radius: 2px;
	}

	.videoinfo .left-img .video-time {
		position: absolute;
		bottom: 3px;
		right: 0;
		padding: 2px 4px;
		border-radius: 1px 0 2px 0;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.6);
	}

	.userinfo .right-txt {
		text-align: left;
		flex: 1;
		overflow: hidden;
		margin-left: 12px;
		display: flex;
		flex-direction: column;
	}

	.userinfo .right-txt .flex-box {
		display: flex;
		align-items: center;
	}

	.userinfo .right-txt h3 {
		font-size: 16px;
		color: #454555;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.userinfo .right-txt h3.title {
		padding-right: 5px;
		max-width: 220px;
		font-size: 16px;
		color: #454555;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap !important;
	}

	.videoinfo .up-tag {
		font-size: 12px;
		line-height: 19px;
		border-radius: 2px;
		border: 1px solid;
		padding: 0 8px;
		margin-right: 5px;
	}

	.videoinfo .up-tag.tag-plain {
		color: #8798ad;
		border-color: #8798ad;
	}

	.videoinfo .up-tag.tag-red {
		background-color: rgba(255, 64, 87, .04);
		color: #ff4057;
		border-color: #ff4057;
	}

	.f12 {
		font-size: 12px !important;
	}

	.tx-color-gray-8 {
		color: #8798ad;
	}

	.ml5 {
		margin-left: 5px !important;
	}

	.mt10 {
		margin-top: 10px !important;
	}

	.tag-ov {
		max-width: 115px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.videoinfo .up-tag {
		font-size: 12px;
		line-height: 20px;
		border-radius: 2px;
		border: 1px solid;
		padding: 0 8px;
		margin-right: 5px;
	}

	.videoinfo .up-tag.tag-plain {
		color: #8798ad;
		border-color: #8798ad;
	}

	.paging {
		text-align: center;
		padding: 0;
	}

	.paging.el-pagination {
		font-weight: 400;
		font-size: 14px;
	}

	.mt15 {
		margin-top: 15px !important;
	}

	.el-pagination.is-background .el-pager li:not(.disabled).active {
		color: #5830a0;
	}

	.tab-active {
		color: #5830a0;
	}

	#echart4 {
		width: 1149px;
		height: 296px;
	}

	#echart5 {
		width: 820px;
		height: 296px;
	}

	#echart6 {
		width: 820px;
		height: 296px;
	}

	.chart-wrap:after {
		content: '';
		display: block;
		height: 0;
		clear: both;
		overflow: hidden;
	}

	.mt20 {
		margin-top: 20px !important;
	}

	.table-wrap {
		color: #333;
	}
	.flex-col{
		flex-direction: column !important;
	}
</style>
